<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue';
import API from '@/services';
import { useRouter, useRoute } from 'vue-router';
import { INDEX_DEVELOPE_COLUMNS, METRICS_TYPE } from '@/constants/indexDevelop';
import { store } from '@/store';

const route = useRoute();
let tableId = ref(route.query.metricsId);

const metricsDetail: any = ref();
let getMetricsData = reactive<any>({});
const metricsMessage = async () => {
  try {
    const { code, data } = await API.metrics.getMetricsById({
      id: tableId.value as any
    });
    if (code === 200) {
      let repeatMetrics = {};
      getMetricsData = data;
      Object.keys(getMetricsData).forEach((item: any) => {
        repeatMetrics[item] = getMetricsData[item] || '--';
      });
      metricsDetail.value = repeatMetrics;
      //派生指标修饰词处理
      if (
        metricsDetail.value.metricsType == 2 &&
        metricsDetail.value.modifierIdsSort
      ) {
        let modifierIds = metricsDetail.value.modifierIdsSort.split(';');
        let modifierNames = modifierIds
          .map((item: any) => {
            let modifier = metricsDetail.value.modifiers.find(
              (obj: any) => obj.id == item
            );
            if (modifier) {
              return modifier.cnName;
            }
          })
          .filter((item: any) => item != undefined);
        metricsDetail.value.modifierName = modifierNames.join('、');
      }
      //可用维度处理
      if (
        metricsDetail.value.metricsType != 1 &&
        metricsDetail.value.dimensions
      ) {
        let names = metricsDetail.value.dimensions.map(
          (item: any) => item.cnName
        );
        metricsDetail.value.dimensionName = names.join('、');
      }

      store.commit('metricsdevelop/setMetricsEnName', data?.enName);
      store.commit(
        'metricsdevelop/setMetricsCnName',
        metricsDetail.value.metricsType == 2
          ? data?.dependMetrics?.cnName
          : data?.cnName
      );
    }
  } catch (error) {}
};
onMounted(() => {
  metricsMessage();
});
</script>
<template>
  <div class="dev-drawer">
    <div class="dev-drawer_tag">
      <span :class="['tag-btn', METRICS_TYPE[metricsDetail?.metricsType]?.bg]">
        {{ METRICS_TYPE[metricsDetail?.metricsType]?.name }}
      </span>
      <span class="col_grey">ID：{{ metricsDetail?.id }}</span>
    </div>
    <div class="index-title fw mt-10">
      {{ metricsDetail?.cnName }}-{{ metricsDetail?.versionNo }}
    </div>

    <div class="form-item">
      <div>指标英文名：</div>
      <div>{{ metricsDetail?.enName }}</div>
    </div>
    <div class="form-item">
      <div>指标别名：</div>
      <div v-if="metricsDetail?.alias">{{ metricsDetail?.alias }}</div>
      <div v-else>--</div>
    </div>
    <div class="form-item">
      <div>业务含义：</div>
      <div>{{ metricsDetail?.businessMeaning }}</div>
    </div>
    <div class="form-item" v-if="metricsDetail?.metricsType == 3">
      <div>运算逻辑：</div>
      <div>{{ metricsDetail?.calculationFormula }}</div>
    </div>
    <div class="form-item" v-if="metricsDetail?.metricsType == 2">
      <div>原子指标：</div>
      <div>{{ metricsDetail?.dependMetrics?.cnName }}</div>
    </div>
    <div class="form-item" v-if="metricsDetail?.metricsType == 2">
      <div>修饰词：</div>
      <div>{{ metricsDetail?.modifierName }}</div>
    </div>
    <div class="form-item">
      <div>统计粒度：</div>
      <div>{{ metricsDetail?.timePeriodStr }}</div>
    </div>
    <div class="form-item">
      <div>默认聚合方式：</div>
      <div>{{ metricsDetail?.aggregation }}</div>
    </div>
    <div class="form-item" v-if="metricsDetail?.metricsType != 1">
      <div>可用维度：</div>
      <div v-if="metricsDetail?.dimensionName">{{ metricsDetail?.dimensionName }}</div>
      <div v-else>--</div>
    </div>
    <div class="form-item" v-if="metricsDetail?.metricsType != 3">
      <div>数据类型：</div>
      <div>{{ metricsDetail?.dataType }}</div>
    </div>
    <div class="form-item">
      <div>技术口径：</div>
      <div v-if="metricsDetail?.caliber">{{ metricsDetail?.caliber }}</div>
      <div v-else>--</div>
    </div>
    <div class="form-item">
      <div>指标等级：</div>
      <div>{{ metricsDetail?.grade }}</div>
    </div>
    <div class="form-item">
      <div>计量单位：</div>
      <div v-if="metricsDetail?.unit">{{ metricsDetail?.unit }}</div>
      <div v-else>--</div>
    </div>
    <div class="form-item">
      <div>需求提出人：</div>
      <div>{{ metricsDetail?.sourceMaker }}</div>
    </div>
    <div class="form-item">
      <div>需求时间：</div>
      <div>{{ metricsDetail?.createTime }}</div>
    </div>
    <div class="form-item">
      <div>指标创建人：</div>
      <div>{{ metricsDetail?.createBy }}</div>
    </div>
    <div class="form-item">
      <div>指标创建时间：</div>
      <div>{{ metricsDetail?.createTime }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>